<template>
	<mescroll-uni :fixed="false" :down="downOption" :up="upOption" @up="upCallback" @init="mescrollInit">
		<view class="container">
			<view v-for="(item,index) in list" :key="index" class="destination-item" @tap="() => previewDetail(item)">
				<image :src="item.imageSrc" class="logo" />
				<view class="content">
					<view class="tit">{{ item.name }}</view>
					<view class="bottom-box">
						<view class="tag" :style="{ background: item.type === '临时停车' ? '#f3a73f' : '#18bc37'}">
							{{ item.type }}
						</view>
						<view>{{ getMapDistance(item.latitude, item.longitude) }}</view>
					</view>
				</view>
			</view>
		</view>

	</mescroll-uni>
</template>

<script>
	import Mescroll from './mescroll-uni/mescroll-uni.vue'
	export default {
		props: {
			// 当前tab的下标
			tabIndex: {
				type: Number,
				default: 0
			},
			// 每个tab页的专属下标
			currentIndex: { // 当前tab的下标
				type: Number,
				default () {
					return 0
				}
			}
		},
		components: {
			'mescroll-uni': Mescroll
		},
		data() {
			return {
				hasLocation: false,
				location: {
					longitude: 0,
					latitude: 0,
				},
				list: [{
					"id": 1,
					"latitude": 22.64999,
					"longitude": 114.02535,
					"name": "广东省深圳市龙华区景龙建设路",
					"desc": "月卡600，单次封顶45/天，可以在宜停车买券，可以到物业办卡",
					"imageSrc": "https://pic.imgdb.cn/item/65606dd8c458853aef6b4835.png",
					"type": "月卡"
				}, {
					"id": 2,
					"latitude": 22.64999,
					"longitude": 114.02535,
					"name": "广东省深圳市龙华区景龙建设路",
					"desc": "月卡600，单次封顶45/天，可以在宜停车买券，可以到物业办卡",
					"imageSrc": "https://pic.imgdb.cn/item/65606dd8c458853aef6b4835.png",
					"type": "季卡"
				}, {
					"id": 3,
					"latitude": 22.64999,
					"longitude": 114.02535,
					"name": "广东省深圳市龙华区景龙建设路",
					"desc": "月卡600，单次封顶45/天，可以在宜停车买券，可以到物业办卡",
					"imageSrc": "https://pic.imgdb.cn/item/65606dd8c458853aef6b4835.png",
					"type": "年卡"
				}],
				mescroll: null, //mescroll实例对象
				downOption: {
					use: false, // 是否启用下拉刷新; 默认true
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '暂无数据', // 提示
						icon: ''
					}
				},
			}
		},

		created() {
			if (this.mescroll) {
				this.list = []; //清空
				this.mescroll.resetUpScroll();
			}
		},

		watch: {
			// 监听下标的变化
			currentIndex(val) {
				if (this.mescroll) {
					this.list = []; //清空
					this.mescroll.resetUpScroll();
				}
			}
		},

		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},

			upCallback(page) {
				console.log("9527: ", 9527);
				setTimeout(() => {
					this.$nextTick(() => {
						this.mescroll.endSuccess(1)
					})
				}, 500)
				return
				const param = {
					page: page.num,
					limit: page.size,
					status: this.i - 1,
				};
				this.$postRequest(orderList, param).then(({
					data: {
						code,
						data,
						msg
					}
				}) => {
					if (code === 0) {
						let arr = [];
						if (data.length > 0) arr = data;
						if (page.num === 1) this.list = [];
						this.list = this.list.concat(arr);
						setTimeout(() => {
							this.$nextTick(() => {
								this.mescroll.endSuccess(arr.length)
							})
						}, 500)
					} else {
						uni.showToast({
							title: msg,
							icon: "none",
						});
					}
				});
			},
			Rad(d) {
				return (d * Math.PI) / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			getMapDistance(lat1, lng1) {
				const radLat1 = this.Rad(lat1);
				const radLat2 = this.Rad(this.location.latitude);
				const a = radLat1 - radLat2;
				const b = this.Rad(lng1) - this.Rad(this.location.longitude);
				let s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
							Math.cos(radLat2) *
							Math.pow(Math.sin(b / 2), 2),
						),
					);
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				s = s.toFixed(1);
				return s + 'km';
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.destination-item {
			padding: 16rpx;
			background: white;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 15px;

			.logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				.tit {
					font-weight: 700;
				}

				.bottom-box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.tag {
					padding: 0 16rpx;
					border-radius: 10rpx;
					color: white;
					font-size: 12px;
				}
			}
		}
	}
</style>
